<template>

	<div class="page flex unified-flex-space-between ">

		<div class="template-list">
			<div class="selectType flex unified-flex-align unified-flex-center">
				<el-dropdown @command="changeDropDown">
					<span class="el-dropdown-link">
						{{templateDropdownName}}<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item :command="0">
							全部
						</el-dropdown-item>
						<el-dropdown-item v-for="(typeItem,index) in emsTemplate" :key="index+1" :command="index+1">
							{{typeItem.name}}
						</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
			<div class="template-li" v-for="(temp,index) in templatelist" :key="temp._id"
				@click="selectTemp(index,temp.name,temp.value)" :class="{
					'template-li-checked':template_index == index
				}">

				<p class="templateName">{{temp.name}}</p>
				<p class="templateValue">{{temp.value}}</p>
			</div>


		</div>

		<div class="content">
			<div class="value-view">

				{{templateValue}}

			</div>
			<el-divider content-position="left">推送成员</el-divider>
			<div class="member-list">

				<!-- 成员搜索框 -->
				<search text="添加" @click="addMember" style="margin-top: 10px;">
					<input v-model="member" type="text" maxlength="11" class="search-input">
				</search>

				<div class="reveal flex unified-flex-align unified-flex-space-between">

					<div>
						<span style="margin-right: 20px;">成员数: {{memberPushlist.length + '/' + maxMember}}</span>
						<span style="margin-right: 20px;">需消耗短信额度: {{memberPushlist.length}}</span>
						<span style="margin-right: 20px;">剩余短信额度: {{surplusEms}}</span>
					</div>
					<div>
						<el-button type="warning" round :disabled="!memberPushlist.length" @click="empty">清除</el-button>
						<el-button type="success" icon="el-icon-time" round :disabled="delayBtnDisabled">定时发布
						</el-button>
						<el-button type="primary" icon="el-icon-s-promotion" round :disabled="pushBtnDisabled"
							@click="sumbit">立即发布</el-button>
					</div>
				</div>

				<div class="member-form">
					<el-table :data="memberlist" style="width: 100%">

						<el-table-column type="index" label="#" width="60">
						</el-table-column>

						<el-table-column prop="mobile" label="Mobile" width="180">
							<!-- <div>
								<el-link>有下划线</el-link>
								<i class="el-icon-edit-outline" style="margin-left: 8px;transform: translateY(2px);"
									@click="editMember"></i>
							</div> -->
						</el-table-column>

						<el-table-column prop="region" label="Region">
						</el-table-column>

						<el-table-column prop="empty" label="Empty">
						</el-table-column>

						<el-table-column prop="status" label="Status">
						</el-table-column>

						<el-table-column prop="status" label="Option">
							<el-button type="text">删除</el-button>
						</el-table-column>

					</el-table>
				</div>
				<div class="unified-pagination unified-bg-white">
					<el-pagination :total="memberPushlist.length" :page-size="limit" :current-page="page"
						:page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper"
						@current-change="changeMemberPage" @size-change="changeMemberLimit">
					</el-pagination>
				</div>

			</div>
		</div>
	</div>


</template>

<script>
	import {
		mapState
	} from 'vuex'
	import search from '../../components/search/search.vue'
	// 引入 VUE mixin
	import {
		ems
	} from '../../mixin/mixin.js'

	export default {
		mixins: [ems],
		components: {
			search
		},
		computed: {

			// 引入VUEX 内 需要用到的数据
			...mapState(['emsTemplate', 'emsTemplateType', 'surplusEms']),

			memberlist() {
				let start = (this.page - 1) * this.limit
				let end = this.page * this.limit
				return this.memberPushlist.slice(start, end)
			},
		},
		data() {
			return {
				// api地址
				api: this.$api.ems,
				// 当前输入的成员号码
				member: 13531609457,
				// 已添加的成员列表
				memberPushlist: [],
				// 当前成员列表页数
				page: 1,
				// 成员列表每页数量
				limit: 10,
				// 最大成员数量
				maxMember: 500,
				// 立即发布按钮禁止状态
				pushBtnDisabled: true,
				// 延迟发布按钮禁止状态
				delayBtnDisabled: true,
				// 当前选择的模板内容
				templateValue: "",
				// 当前选择的模板名称
				templateName:""

			}
		},
		methods: {

			// 清除成员列表
			empty() {
				this.memberPushlist.splice(0, this.memberPushlist.length)
			},
			// 成员列表切换页面
			changeMemberPage(page) {
				this.page = page
			},
			// 成员列表切换每页显示数量
			changeMemberLimit(limit) {
				this.limit = limit
			},
			// 点击模板那
			selectTemp(index, name, value) {
				this.template_index = index
				this.templateName = name
				this.templateValue = value
			},
			// 是否已选择分类和选择模板
			ifPrepare() {

				if (this.template_index) {
					return true
				} else {
					return false
				}
			},
			// 添加成员
			addMember() {

				let member = this.member
				if (!this.ifPrepare()) {
					this.$message.error('添加失败，请先选择一个短信模板');
				} else if (member.toString().length != 11) {
					this.$message.error('添加失败，手机号码格式不正确');
				} else if (this.memberPushlist.filter((item) => item.mobile == member).length) {
					this.$message.error('添加失败，号码已存在');
				} else if (this.memberPushlist.length >= this.surplusEms) { // 判断额度是否足够
					this.$message.error('添加失败，短信剩余额度不足');
				} else if (this.memberPushlist.length > this.maxMember) { // 判断成员数是否过多
					this.$message.error('添加失败，成员数已达到上线');
				} else {
					//  立即发布按钮取消禁止状态
					this.pushBtnDisabled = false
					this.memberPushlist.push({
						mobile: member, // 手机号码
						region: "", // 归属地
						empty: "", // 是否空号
						status: 0 // 推送状态 0推送成功 1待推送  2推送失败
					})
					this.$message.success('添加成功');
				}


			},
			// 立即发布
			sumbit() {
				if (this.memberPushlist.length) {
					this.$confirm('本次发布需要消耗短信额度:' + this.memberPushlist.length + ', 是否确认发布?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'success '
					}).then(() => {
						this.$axios({
							url: this.$api.ems,
							method: "POST",
							data: {
								"action": "push",
								"params": {
									provider: "", // 推送平台id
									template_type: "", // 推送分类id
									template_type_name: "模板分类名称", // 模板分类名称（记录用，防止原模板分类数据更改）
									template: "", // 推送模板id
									template_name: this.templateName, // 模板名称 （记录用，防止原模板数据更改）
									template_value: this.templateValue, // 模板内容（记录用，防止原模板数据更改）
									delayed: false, // 延时推送,  false立即推送 true延时推送
									delay: null,	// 延迟毫秒数
									member: this.memberPushlist // 成员列表
								}
							}
						}).then(res => {
							if(res.data.code == 0){
								this.$message.success(res.data.msg)
							}else{								
								this.$message.error(res.data.msg);
							}
						}).catch(err => {
							console.log(err);
						})
					})
				} else {
					console.log('不可以发布');
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.page {
		width: 100%;
		padding: 25px 20px;
		box-sizing: border-box;
        flex-direction: row;
		background-color: #fff;
	}

	.template-list,
	.content {
		height: 100%;
		border-radius: 10px;
		background-color: #fff;
		overflow: hidden;
	}

	.template-list {
		min-width: 200px;
		width: 23%;
		margin-right: 25px;
		box-shadow: 0px 0px 4px 1px #C3C3C344;
	}

	.content {
		flex: 1;
		padding: 20px;
		padding-left: 0px;
		box-sizing: border-box;
		padding-top: 0px;
	}

	.member-list,
	.value-view {
		width: 100%;
		margin: 0px auto;
		border-radius: 10px;
	}

	.value-view {
		height: 160px;
		background-color: #c3c3c324;
		margin: 15px auto;
		margin-top: 0px;
		border-radius: 10px;
	}

	.selectType {
		width: 100%;
		height: 50px;
		background-color: #c3c3c344;
	}

	.reveal {
		width: 100%;
		height: 40px;
		margin: 15px 0px;
	}

	.push-btn {
		margin-left: 10px;
		height: 25px;
		line-height: 25px;
	}

	.template-li {
		width: 100%;
		height: 65px;
		background-color: #fff;
		/* color: #fff; */
		padding-left: 15px;
		box-sizing: border-box;
		border-bottom: 1px solid #C3C3C324;
		transition: .3s all linear;
	}

	.template-li-checked {
		background-color: #2ec36e;
		color: #fff !important;
	}

	.tips {

		width: 96%;
		margin: 0 auto;
		height: 90px;
		border-radius: 10px;
		background-color: #409EFF;
		color: #fff;
		font-size: 12px;
	}

	.template-li .templateName {
		font-size: 13px;
		line-height: 35px;
	}

	.template-li .templateValue {
		font-size: 12px;
		color: #8C939D;
		line-height: 20px;
	}



	.form {
		width: 80%;
		margin: 0 auto;
		padding: 20px 0px;
	}

	.template-value {
		width: 100%;
		height: 100px;
		background-color: #8C939D22;
		border-radius: 10px;
		font-size: 12px;
		padding: 8px;
		box-sizing: border-box;
		color: #2C3E50;
	}

	.member-list {
		min-height: 400px;
		margin-top: 15px;
	}

	.add-input {
		width: 100%;
		height: 55px;
	}

	.member-li {
		-webkit-user-select: none;
		width: 100%;
		height: 60px;
		line-height: 60px;
		background-color: #0081FF;
		padding-left: 15px;
		box-sizing: border-box;
	}


	.page /deep/ input::-webkit-outer-spin-button,
	.page /deep/ input::-webkit-inner-spin-button {
		-webkit-appearance: none;
	}

	.page /deep/ input[type="number"] {
		text-indent: 0px;
		line-height: 40px;
		vertical-align: middle;
		white-space: nowrap;
		-moz-appearance: textfield;
		-webkit-appearance: none;
	}
</style>
